<template>
  <div class="list">
    <div class="head">
      <div class="id">员工ID</div>
      <div class="name">用户名</div>
      <div class="department">所在部门</div>
      <div class="phone">联系电话</div>
      <div class="induction">入职时间</div>
    </div>
    <div v-for="(item, index) in workerList" :key="index" class="worker">
      <div class="up">
        <!-- <i class="el-icon-arrow-down" @click="isClick(item)"></i> -->
        <div class="icon" @click="isClick(index)">
          <i class="el-icon-arrow-down" v-if="look[index].show"></i>
          <i class="el-icon-arrow-right" v-else></i>
        </div>
        <div class="info">
          <div class="id">{{ item.id }}</div>
          <div class="name">{{ item.username }}</div>
          <div class="department">
            <el-tag>{{ item.department }}</el-tag>
          </div>
          <div class="phone">{{ item.phone }}</div>
          <div class="induction">{{ item.createTime }}</div>
        </div>
      </div>
      <div class="down" v-show="look[index].show">
        <!-- look[index].show -->
        <div class="left">
          <div>用户名：{{ item.username }}</div>
          <div class="password">
            密码：<span @click="passwordClick(item)">编辑密码</span>
          </div>

          <div>性别：{{ item.gender }}</div>
          <div>
            状态：<span v-if="item.entry == 1">在职</span
            ><span v-if="item.entry == 0">离职</span>
          </div>
          <div class="avatar">
            头像：<span @click="checkAvatar(item)">查看</span>
          </div>
        </div>
        <div class="right">
          <div>昵称：{{ item.nickname }}</div>
          <div>手机号码：{{ item.phone }}</div>
          <div>更新时间：{{ item.updateTime }}</div>
          <div class="delete">
            <el-button type="danger" @click="deleteClick(item)">删除</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑密码对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%">
      请输入新密码
      <el-input type="text" v-model="newPassword"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog1Cancel()">取 消</el-button>
        <el-button type="primary" @click="updatePassword()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看头像 -->
    <el-dialog title="查看头像" :visible.sync="dialogVisible2" width="340px">
      <img id="avatar" class="avatar" :src="src" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible2 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllWorker,
  updateWorkerNewPassword,
  deleteWorker,
} from "@/api/manager";
export default {
  data() {
    return {
      workerList: {},
      look: [],
      dialogVisible1: false,
      dialogVisible2: false,
      newPassword: "",
      src: "",
    };
  },
  mounted() {
    this.getWorkerList();
  },
  methods: {
    // 获取员工列表
    getWorkerList() {
      getAllWorker().then((res) => {
        res.msg = "workerList";
        for (var i = 0; i < res.data.length; i++) {
          res.data[i].createTime = this.formatDate1(res.data[i].createTime);
          res.data[i].updateTime = this.formatDate1(res.data[i].updateTime);
          res.data[i].birthday = this.formatDate2(res.data[i].birthday);
          this.look.push(Object.assign({}, i, { show: false }));
        }
        // console.log(res);
        this.workerList = res.data;
      });
    },
    // 下拉详情
    isClick(index) {
      this.look[index].show = !this.look[index].show;
    },

    // 编辑密码按钮
    passwordClick(item) {
      localStorage.setItem("swid", item.id);
      this.dialogVisible1 = true;
    },
    // 编辑密码取消
    dialog1Cancel() {
      this.dialogVisible1 = false;
      this.newPassword = "";
      localStorage.removeItem("swid");
    },
    // 提交新密码
    updatePassword() {
      const data = {
        id: localStorage.getItem("swid"),
        newPassword: this.newPassword,
      };
      updateWorkerNewPassword(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
        }
        console.log(res);
        this.dialogVisible1 = false;
        this.newPassword = "";
        localStorage.removeItem("swid");
      });
    },
    // 查看头像
    checkAvatar(item) {
      this.dialogVisible2 = true;
      // console.log(item.avatar);
      // console.log(document.getElementById("avatar"));
      this.src = item.avatar;
    },

    // 删除员工
    deleteClick(item) {
      if (item.entry == "1") {
        this.$message.warning("该员工正在职，无法删除！");
      } else {
        deleteWorker(item.id).then((res) => {
          this.$message.success("删除成功！");
        });
        setTimeout(() => {
          this.getWorkerList()
        }, 100);
      }
    },

    // 日期格式化
    formatDate1(dateint) {
      var date = new Date(parseInt(dateint));
      var str = date.getFullYear() + "-";
      if (date.getMonth() < 10) {
        str += "0";
      }
      str += date.getMonth() + 1 + "-";
      if (date.getDate() < 10) {
        str += "0";
      }
      str += date.getDate() + " ";
      if (date.getHours() < 10) {
        str += "0";
      }
      str += date.getHours() + ":";
      if (date.getMinutes() < 10) {
        str += "0";
      }
      str += date.getMinutes() + ":";
      if (date.getSeconds() < 10) {
        str += "0";
      }
      str += date.getSeconds();
      return str;
    },
    // 日期格式化 年月日
    formatDate2(dateint) {
      var date = new Date(parseInt(dateint));
      var str =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return str;
    },
  },
};
</script>

<style lang='scss' scoped>
.list {
  width: 1100px;
  height: 850px;
  background-color: #fff;
  margin: auto;
  position: relative;
  top: 25px;
  overflow-x: hidden;
  overflow-y: auto;
  .avatar {
    width: 300px;
  }
  .head {
    border-bottom: 1px solid #000;
    position: relative;
    height: 50px;
    div {
      font-size: 20px;
      float: left;
      color: rgb(85, 85, 85);
      font-weight: bold;
      padding-top: 15px;
    }
    .id {
      position: absolute;
      left: 50px;
      width: 80px;
    }
    .name {
      position: absolute;
      left: 200px;
    }
    .department {
      position: absolute;
      left: 360px;
    }
    .phone {
      position: absolute;
      left: 580px;
    }
    .induction {
      position: absolute;
      left: 850px;
    }
  }
  .worker {
    width: 1100px;
    height: auto;
    float: left;
    // border-bottom: 1px solid #000;

    .up {
      width: 1100px;
      height: 50px;
      border-bottom: 1px solid #000;
      .icon {
        cursor: pointer;
        float: left;
        padding: 13px 15px;
      }
      .info {
        position: relative;
        div {
          float: left;
          padding: 12px 0;
        }
        .id {
          position: absolute;
          left: 75px;
          width: 80px;
        }
        .name {
          position: absolute;
          left: 207px;
        }
        .department {
          position: absolute;
          left: 350px;
          padding: 5px 0;
          * {
            width: 100px;
            height: 40px;
            font-size: 14px;
            text-align: center;
            padding: 3px 0;
          }
        }
        .phone {
          position: absolute;
          left: 570px;
        }
        .induction {
          position: absolute;
          left: 820px;
          top: 5px;
        }
      }
    }
    .down {
      width: 1100px;
      height: 220px;
      border-bottom: 1px solid #000;
      .left {
        position: absolute;
        left: 50px;
        float: left;
        padding: 10px 0;
        div {
          padding: 10px 0;
        }
        .password {
          span {
            cursor: pointer;
            color: #409eff;
          }
        }
        .avatar {
          span {
            cursor: pointer;
            color: #409eff;
          }
        }
      }
      .right {
        float: left;
        position: absolute;
        left: 500px;
        padding: 10px 0;
        div {
          padding: 10px 0;
        }
      }
    }
  }
}
</style>